<template>
    <div class="el-header">
        <div class="headerleft">
            <div class="logo"><img src="../assets/logo.png" alt="" height="100%"></div>
            <p class="navbtn" @click="goHome"><el-icon>
                    <House />
                </el-icon>&nbsp;首页</p>
            <p class="navbtn" @click="goHot"><el-icon>
                    <Loading />
                </el-icon>&nbsp;热搜</p>
            <p class="navbtn" @click="goNotice"><el-icon>
                    <Message />
                </el-icon>&nbsp;公告</p>
            <p class="navbtn" @click="goTask"><el-icon>
                    <Finished />
                </el-icon>&nbsp;任务</p>
        </div>
        <div class="headercenter">
            __<el-icon>
                <CollectionTag />
            </el-icon>个人__
        </div>
        <div class="headerright">
            <div class="person" @click="goPersonal"><el-icon>
                    <User />
                </el-icon>个人</div>
        </div>
    </div>
</template>

<script setup>
import router from '../router'

//点击首页按钮
const goHome = () => {
    router.push('/')
}
// 点击热搜按钮
const goHot = () => {
    router.push('/hotsearch')
}
// 点击公告按钮
const goNotice = () => {
    router.push('/notice')
}
// 点击任务按钮
const goTask = () => {
    router.push('/task')
}
// 点击个人按钮
const goPersonal = () => {
    router.push('/login')
}
</script>

<style scoped lang = "less" >
.el-header {
    background-image: linear-gradient(to right, #fefefe, #ffffff, #409eff);
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .headerleft {
        height: 100%;
        display: flex;
        align-items: center;
        width: 45%;
        font-size: 20px;

        .logo {
            height: 100%;
            margin-left: 10px;
            border-radius: 50%;
            overflow: hidden;
        }

        .navbtn {
            margin-left: 10px;
            user-select: none;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 10px;

            &:hover {
                background-color: #40a0ffa5;
            }
        }
    }

    .headercenter {
        height: 100%;
        width: 10%;

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #40a0ff;
        font-weight: bold;
    }

    .headerright {
        height: 100%;
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .person {
            user-select: none;
            height: 80%;
            font-size: 20px;
            display: flex;
            align-items: center;
            margin-right: 10px;
            padding: 0 10px;
            border-radius: 25px;

            &:hover {
                background-color: #abd5ff;

            }
        }
    }
}
</style >